<template>
  <div class="copy">
    <div class="copy_box">
      <div class="title-box">
        抄送列表
      </div>
      <div class="copy-table-box">
        <el-table
            :data="tableData"
            stripe
            style="width: 100%; margin-top: 2vh"
            border
            max-height="75vh"
            empty-text="暂无数据"
        >
          <el-table-column
              prop="flow_index"
              label="ID"
              width="80"
              align="center"
          />
          <el-table-column
              prop="flow_uploader_name"
              label="申请人"
              width="150"
              align="center"
          />
          <el-table-column
              label="申请时间"
              width="200"
              align="center"
          >
            <template #default="{row}">
              {{ computeDate(row.created_at) }}
            </template>
          </el-table-column>
          <el-table-column
              prop="flow_type"
              label="流程类型"
              align="center"
              width="150"
          >
            <template #default="{row}">
              <div v-if="row.flow_type === 0">
                <el-tag>
                  请假
                </el-tag>
              </div>
              <div v-if="row.flow_type === 1">
                <el-tag>
                  用印
                </el-tag>
              </div>
              <div v-if="row.flow_type === 2">
                <el-tag>
                  报销
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="flow_status"
              label="状态"
              align="center"
              width="150"
          >
            <template #default="{row}">
              <div v-if="row.status === 0">
                <el-tag type="info">
                  等待处理
                </el-tag>
              </div>
              <div v-if="row.status === 1">
                <el-tag type="warning">
                  正在处理
                </el-tag>
              </div>
              <div v-if="row.status === 2">
                <el-tag type="success">
                  处理完成
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="operator_name"
              label="当前/最后审批人"
              align="center"
              width="150"
          />
          <el-table-column
              prop="flow_detail"
              label="理由/说明/备注"
              width="750"
              align="center"
          />
          <el-table-column
            label="操作"
            align="center"
          >
            <template #default="{row}">
              <el-button
                  type="primary"
                  size="small"
                  @click="toHandle(row.application_id)"
              >
                详情
              </el-button>
            </template>
        </el-table-column>
        </el-table>
      </div>
    </div>

    <PreViewDialog ref="preRef"/>
  </div>

  <PreViewDialog ref="preRef"/>
</template>

<script setup>
import {ElButton, ElInput, ElMenu, ElMenuItem, ElMessage, ElTable, ElTableColumn, ElTag} from "element-plus"
import {onMounted, ref} from "vue"
import {getCopyList} from "@/api"
import {computeDate} from "@/lib/utils.js"
import HandleDialog from "@/components/OA/Leave/MyHandled/HandleDialog.vue"
import PreViewDialog from "@/components/Common/OA/PreViewDialog.vue"
import {useRoute} from "vue-router"
import emitter from "@/lib/eventBus"

const route = useRoute()

let currentUser
const tableData = ref([])
const handleALL = ref()
const preRef = ref()

let upTop_id

onMounted(() => {
  try {
    emitter.emit('home_menu','/OA/my-copy')
    getUser()
    getFlowList()
    if(route && route.query){
      upTop_id = route.query.approve_id
    }
  } catch (e) {
    console.log(e)
  }
})


const getUser = () => {
  currentUser = JSON.parse(localStorage.getItem('syhyDocManSys'))
}

const getFlowList = async () => {
  try {
    const {data:res} = await getCopyList({
      id:currentUser.id
    })
    if(!res && !res.length){
      return ElMessage({
        message:'获取列表失败',
        type:'error',
      })
    } else {
      tableData.value = res.data
    }
  } catch (e) {
    console.log(e)
  }
}

const toHandle = (id) => {
  preRef.value.showDetails(id)
}

</script>

<style scoped lang="less">
.copy{
  height: 110vh;
  width: 95vw;
  /* border: 1px solid; */
  display: flex;
  margin-left: 5vw;
  .copy_box{
    margin-top: 2vh;
    margin-left: 4vw;
    width: 95%;
    height: 87.5%;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 0 7px 7px lightgray;
    background-color: rgba(250, 250, 250);
    .el-menu-demo{
      width: 99.5%;
      margin: 5px auto;
    }
    .search-box{
      margin-top: 1vh;
      text-align: left;
      padding-left: 1vw;
    }
    .title-box{
      height: 6vh;
      text-align: left;
      padding-left: 2vw;
      line-height: 9vh;
      font-size: 2.4vh;
      font-weight: 600;
    }
    .copy-table-box{}
  }
}
</style>
